import Layout from '@views/layout/index.vue'

const routes = [
  {
    path: '/hooks',
    name: 'hooks',
    component: Layout,
    meta: {
      title: 'HOOKS',
    },
    children: [
      {
        path: 'dog',
        name: 'hooks-dog',
        component: () => import('@views/hooks/dog/index.vue'),
        meta: {
          title: 'dog',
        },
      },
      {
        path: 'circle',
        name: 'hooks-circle',
        component: () => import('@views/hooks/circle/HooksDemo.vue'),
        meta: {
          title: 'circle改变圆的属性',
        },
      },
      {
        path: 'circle-no-hooks',
        name: 'hooks-circle-no-hooks',
        component: () => import('@views/hooks/circle/NoHooksDemo.vue'),
        meta: {
          title: 'circle-no-hooks',
        },
      },
    ],
  },
  {
    path: '/basic',
    name: 'basic',
    meta: {
      title: '基础',
    },
    component: Layout,
    children: [
      {
        path: 'ref',
        name: 'basic-ref',
        component: () => import('@/views/basic/RefUse.vue'),
        meta: {
          title: 'ref',
        },
      },
      {
        path: 'shadow-ref',
        name: 'basic-shadow-ref',
        component: () => import('@/views/basic/ShadowRef.vue'),
        meta: {
          title: 'shadow-ref',
        },
      },
      {
        path: 'reactive',
        name: 'basic-reactive',
        component: () => import('@/views/basic/ReactiveUse.vue'),
        meta: {
          title: 'reactive',
        },
      },
      {
        path: 'shadow-reactive',
        name: 'basic-shadow-reactive',
        component: () => import('@/views/basic/ShadowReactive.vue'),
        meta: {
          title: 'shadow-reactive',
        },
      },
      {
        path: 'class',
        name: 'basic-class',
        component: () => import('@/views/basic/ClassUse.vue'),
        meta: {
          title: 'class',
        },
      },
      {
        path: 'nextTick',
        name: 'basic-nextTick',
        component: () => import('@/views/basic/NextTickUse.vue'),
        meta: {
          title: 'nextTick',
        },
      },
      {
        path: 'slot',
        name: 'basic-slot',
        component: () => import('@/views/basic/slot/index.vue'),
        meta: {
          title: 'slot',
        },
      },
      {
        path: 'model',
        name: 'basic-model',
        component: () => import('@/views/basic/model/DefineModel.vue'),
        meta: {
          title: 'model',
        },
      },
      {
        path: 'model-origin',
        name: 'basic-model-origin',
        component: () => import('@/views/basic/model/PropsEmit.vue'),
        meta: {
          title: 'model-origin',
        },
      },
      {
        path: 'computed',
        name: 'basic-computed',
        component: () => import('@/views/basic/computed/index.vue'),
        meta: {
          title: 'computed',
        },
      },
      {
        path: 'readonly',
        name: 'basic-readonly',
        component: () => import('@/views/basic/Readonly.vue'),
        meta: {
          title: 'readonly',
        },
      },
      {
        path: 'toRaw',
        name: 'basic-toRaw',
        component: () => import('@/views/basic/ToRaw.vue'),
        meta: {
          title: 'toRaw',
        },
      },
      {
        path: 'custom-ref',
        name: 'basic-custom-ref',
        component: () => import('@views/basic/customRef/CustomRef.vue'),
        meta: {
          title: 'custom-ref',
        },
      },
      {
        path: 'teleport',
        name: 'basic-teleport',
        component: () => import('@views/basic/teleport/index.vue'),
        meta: {
          title: 'teleport',
        },
      },
      {
        path: 'suspense',
        name: 'basic-suspense',
        component: () => import('@views/basic/suspense/index.vue'),
        meta: {
          title: 'suspense',
        },
      },
    ],
  },
  {
    path: '/watch',
    name: 'watch',
    component: Layout,
    meta: {
      title: 'watch',
    },
    children: [
      {
        path: 'ref-basic',
        name: 'watch-circle',
        component: () => import('@/views/watch/RefBasic.vue'),
        meta: {
          title: 'ref-basic',
        },
      },
      {
        path: 'ref-object',
        name: 'watch-ref-object',
        component: () => import('@/views/watch/RefObject.vue'),
        meta: {
          title: 'ref-object',
        },
      },
      {
        path: 'reactive',
        name: 'watch-reactive',
        component: () => import('@/views/watch/ReactiveObject.vue'),
        meta: {
          title: 'reactive',
        },
      },
      {
        path: 'object-attr',
        name: 'watch-object-attr',
        component: () => import('@/views/watch/ObjectAttr.vue'),
        meta: {
          title: 'object-attr',
        },
      },
      {
        path: 'watchEffect',
        name: 'watch-watchEffect',
        component: () => import('@/views/watch/WatchEffect.vue'),
        meta: {
          title: 'watchEffect',
        },
      },
    ],
  },
  {
    path: '/props',
    name: 'props',
    meta: {
      title: 'props',
    },
    component: Layout,
    children: [
      {
        path: 'define',
        name: 'props-define',
        component: () => import('@views/props/define/index.vue'),
        meta: {
          title: 'define',
        },
      },
      {
        path: 'vmodel',
        name: 'props-vmodel',
        component: () => import('@/views/props/single-props-update/index.vue'),
        meta: {
          title: 'vmodel',
        },
      },
    ],
  },
  {
    path: '/life-cycle',
    name: 'life-cycle',
    component: Layout,
    meta: {
      title: '生命周期',
    },
    children: [
      {
        path: 'basic',
        name: 'life-cycle-basic',
        component: () => import('@views/life-cycle/basic/index.vue'),
        meta: {
          title: 'basic',
        },
      },
    ],
  },
  {
    path: '/pinia',
    name: 'pinia',
    component: Layout,
    meta: {
      title: '大菠萝',
    },
    children: [
      {
        path: 'basic',
        name: 'pinia-basic',
        component: () => import('@views/pinia/basic/index.vue'),
        meta: {
          title: 'basic',
        },
      },
    ],
  },
  {
    path: '/communication',
    name: 'communication',
    component: Layout,
    meta: {
      title: 'communication',
    },
    children: [
      {
        path: 'props',
        name: 'communication-basic',
        component: () => import('@views/communication/01_props/Father.vue'),
        meta: {
          title: 'basic',
        },
      },
      {
        path: 'custom-event',
        name: 'communication-custom-event',
        component: () => import('@views/communication/02_custom-event/Father.vue'),
        meta: {
          title: 'custom-event',
        },
      },
      {
        path: 'mitt',
        name: 'communication-mitt',
        component: () => import('@views/communication/03_mitt/Father.vue'),
        meta: {
          title: 'mitt',
        },
      },
      {
        path: 'v-model',
        name: 'communication-v-model',
        component: () => import('@views/communication/04_v-model/Father.vue'),
        meta: {
          title: 'v-model',
        },
      },
      {
        path: 'attrs',
        name: 'communication-attrs',
        component: () => import('@views/communication/05_$attrs/index.vue'),
        meta: {
          title: 'attrs',
        },
      },
      {
        path: 'refs-parent',
        name: 'communication-refs-parent',
        component: () => import('@views/communication/06_$refs-$parent/index.vue'),
        meta: {
          title: 'refs-parent',
        },
      },
      {
        path: 'provide-inject',
        name: 'communication-provide-inject',
        component: () => import('@views/communication/07_provide-inject/index.vue'),
        meta: {
          title: 'provide-inject',
        },
      },
      {
        path: 'slot',
        name: 'communication-slot',
        component: () => import('@views/communication/09_slot/index.vue'),
        meta: {
          title: 'slot',
        },
      },
    ],
  },
  {
    path: '/components',
    name: 'components',
    component: Layout,
    meta: {
      title: 'components',
    },
    children: [
      {
        path: 'ks-button',
        name: 'components-ks-button',
        component: () => import('@views/custom-components/Button.vue'),
        meta: {
          title: 'basic',
        },
      },
    ],
  },
  {
    path: '/flow',
    name: 'flow',
    component: Layout,
    meta: {
      title: 'flow',
    },
    children: [
      {
        path: 'basic',
        name: 'flow-basic',
        component: () => import('@views/flow/basic/Basic.vue'),
        meta: {
          title: 'basic',
        },
      },
      {
        path: 'basic-custom',
        name: 'flow-basic-custom',
        component: () => import('@views/flow/basic/BasicCustom.vue'),
        meta: {
          title: 'basic-custom',
        },
      },
      {
        path: 'basic-control',
        name: 'flow-basic-control',
        component: () => import('@views/flow/basic/BasicControl.vue'),
        meta: {
          title: 'basic-control',
        },
      },
      {
        path: 'basic-background',
        name: 'flow-basic-background',
        component: () => import('@views/flow/basic/BasicBackground.vue'),
        meta: {
          title: 'basic-background',
        },
      },
      {
        path: 'basic-toolbar',
        name: 'flow-basic-toolbar',
        component: () => import('@views/flow/basic/BasicToolbar.vue'),
        meta: {
          title: 'basic-toolbar',
        },
      },
      {
        path: 'basic-theme',
        name: 'flow-basic-theme',
        component: () => import('@views/flow/basic/BasicTheme.vue'),
        meta: {
          title: 'basic-theme',
        },
      },
      {
        path: 'basic-nodes',
        name: 'flow-basic-nodes',
        component: () => import('@views/flow/nodes/index.vue'),
        meta: {
          title: 'basic-nodes',
        },
      },
      {
        path: 'basic-nodes-basic',
        name: 'flow-basic-nodes-basic',
        component: () => import('@views/flow/nodes/basic.vue'),
        meta: {
          title: 'basic-nodes-basic',
        },
      },
      {
        path: 'basic-nodes-event',
        name: 'flow-basic-nodes-event',
        component: () => import('@views/flow/nodes/event.vue'),
        meta: {
          title: 'basic-nodes-event',
        },
      },
      {
        path: 'basic-nodes-event2',
        name: 'flow-basic-nodes-event2',
        component: () => import('@views/flow/nodes/event2.vue'),
        meta: {
          title: 'basic-nodes-event2',
        },
      },
      {
        path: 'basic-edges',
        name: 'flow-basic-edges',
        component: () => import('@views/flow/edges/index.vue'),
        meta: {
          title: 'basic-edges',
        },
      },
    ],
  },
]

export default routes
